<template>
  <div>
    <!-- <v-head></v-head> -->
    <div>
      <transition name="move" mode="out-in">
        <keep-alive :include="keepAliveIncludeList" :max="5">
          <router-view></router-view>
        </keep-alive>
      </transition>
    </div>
    <footer >
      <v-footer></v-footer>
    </footer>
  </div>
</template>

<script>
import vTabs from "../Tabs.vue";
import vHead from "common/Header.vue";
import vFooter from "common/Footer.vue";
import bus from "common/bus.js";
import { fetchData, getSqlServerItem,getNodeUsability } from "@/api/index.js";
import { UpdateItem,GetItem,DeleteItem,AddItem } from "@/utils/dataStore"
export default {
  components: {
    vTabs,
    vFooter,
    vHead
  },
  beforeRouteEnter(to, from, next) {
    // if (from.path != "/NodeUsability") {
    //   next("/NodeUsability");
    // }
    next();
  },
filters:{
    State:function(value) {
      switch (value) {
          case 0:
            return "状态：健康";
            break;
          case 2:
            return "状态：提醒";         
            break;
          case 3:
            return "状态：紧急";
            break;

          default:
            break;
        }
    },
    itemIp:function(value){
      return "IP:"+value
    }
  },
  data() {
    return {
      keepAliveIncludeList: [],
      postData: {
        opera: "",
        curPage: 1,
        pageSize: 1000000,
        filtersType: "fuzzyquery",
        filters: {
          CID: "",
          StartTime: "",
          EndTime: "",
        },
      },
      tableData: [],
      allData: {},
      dataTotal: 0,
      searchJson: {},

      postSearchData: {
        opera: "hostconnect",
        curPage: 1,
        pageSize: 1000000,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {},
      },
      columns: [],
      TextDatabace: {},
      searchIP: "",
      selectedIP: "",
      loading: true,
      selectedMONID:''
    };
  },
  created() {
    this.getSearchData();
  },
  computed: {
    columnsFn() {
      return this.columns.filter((d) => {
        if (d.IP.includes(this.searchIP)||d.SYSTEMNAME.includes(this.searchIP)) {
          d["selected"] = false;
          
          if (d.MONID == this.selectedMONID) {
            d["selected"] = true;
          }

          return d;
        }
      });
    },
  },
  methods: {
    getSearchData() {
      getSqlServerItem({}).then((res) => {
        res.forEach((item, index) => {
          this.columns.push({
            MONID: item.cid,
            IP: item.ip,
            MAX_ALERTLEVEL: 2,
            DBNAME: item.dbSid,
            DB_SID:item.dbSid,
            SYSTEMNAME:item.systemname
          });
        });
        // console.log(res)


      getNodeUsability({pageNum:1,pageSize:100000}).then(_ => {
          let items=Object.values(_)[0].filter(item =>{
            return item.type=='SQLServer'
          })

          items.forEach(item =>{
            this.columns.forEach(columnsItem => {
              if(item.ip==columnsItem.IP){
                columnsItem.MAX_ALERTLEVEL=Number(item.maxAlertlevel)
              }
            })
          })
        })


        // 初始化时，选中第一个节点
        if (this.columns.length > 0) {
          this.dbClickFirst();
          // this.getTableData();
        }
      });
    },
    TalallColorMethod(percentage) {
      if (percentage <= 50) {
        return "#67c23a";
      } else if (percentage <= 75) {
        return "#e6a23c";
      } else {
        return "#f56c6c";
      }
    },
    TalallColorMethod2(percentage) {
      if (percentage <= 50) {
        return "#f56c6c";
      } else if (percentage <= 75) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },
   async handSearchIp(item) {
      let dexieData;
      await GetItem(sessionStorage.getItem('PushId')).then(_ => dexieData =_ )


      if (this.$route.params.ITEM) {
        // this.selectedMONID = this.$route.params.ITEM.MONID;

        this.selectedMONID = this.$route.params.ITEM.MONID;
        let ITEM = this.columnsFn.filter((_) => {
          // console.log(_.MONID)
          return _.MONID == this.$route.params.ITEM.MONID;
        });

        bus.$emit("ItemMonitorSqlServer", ITEM[0]);
        this.$store.commit(
          "ItemMonitorSqlServer/setItem",
          ITEM[0]
        );
        bus.$emit("ItemMonitorALL", ITEM[0]);
        this.$store.commit("ItemMonitorALL/setItem", ITEM[0]);
        this.$route.params.ITEM=""

        // bus.$emit("ItemMonitorSqlServer", this.$route.params.ITEM);
        // this.$store.commit(
        //   "ItemMonitorSqlServer/setItem",
        //   this.$route.params.ITEM
        // );
        // bus.$emit("ItemMonitorALL", this.$route.params.ITEM);
        // this.$store.commit("ItemMonitorALL/setItem", this.$route.params.ITEM);
        // this.$route.params.ITEM=""
      }else if(dexieData.length > 0){
        let item = dexieData[0].articleAddress
       this.selectedMONID = item.MONID;
        bus.$emit("ItemMonitorSqlServer", item);
        this.$store.commit("ItemMonitorSqlServer/setItem", item);
        bus.$emit("ItemMonitorALL", item);
        this.$store.commit("ItemMonitorALL/setItem", item);
      }  else {
        this.selectedMONID = item.MONID;
        bus.$emit("ItemMonitorSqlServer", item);
        this.$store.commit("ItemMonitorSqlServer/setItem", item);
        bus.$emit("ItemMonitorALL", item);
        this.$store.commit("ItemMonitorALL/setItem", item);
        
      }

      
    },
    dbClickFirst() {
      this.handSearchIp(this.columns[0]);
      this.getTableData();
      // console.log("已选择");
    },
    getTableData() {
      this.loading = true;

      // fetchData({
      //   postData: JSON.stringify(this.postData),
      // }).then((res) => {
      //   this.dataTotal = res.dataTotal;
      //   // this.tableData = res.data;

      //   this.allData = res;
      //   this.loading = false;
      // });
    },
    getPaginationCurPage(val) {
      this.postData.curPage = val;

      this.getTableData();
    },
    getPaginationPageSize(val) {
      // 分页大小改变之后，重置当前页码为 1
      this.postData.curPage = 1;
      this.postData.pageSize = val;

      this.getTableData();
    },
    // 获取子组件选择的时间
    getPickerDate(pickerDate) {
      this.postData.curPage = 1;
      for (const key in pickerDate) {
        this.postData.filters[key] = pickerDate[key];
      }

      this.getTableData();
    },
    getSelectOpera(item) {
      this.postData.curPage = 1;
      this.postData.opera = item.value;
      // 删除后台可能无法识别的 filters 条件
      for (const key in this.postData.filters) {
        if (key != "CID" && key != "StartTime" && key != "EndTime") {
          delete this.postData.filters[key];
        }
      }

      this.getTableData();
    },
    getInputFilter(data) {
      this.postData.curPage = 1;
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          const element = data[key];
          this.postData.filters[key] = element;
        }
      }

      this.getTableData();
    },
  },
  watch: {
    //     loading: {
    // 　　　　handler(newValue, oldValue) {
    //             console.log("------发--------");
    //             console.log(newValue, oldValue);
    // 　　　　}
    // 　　}
  },
  beforeDestroy(){
    DeleteItem(Number(sessionStorage.getItem('PushId'))).then(_=> {
    }).catch(e => {
      console.log(e)
    })
    sessionStorage.clear('PushId')
    window.close()
  }
};
</script>

<style scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
.spanInfo {
  padding-right: 10px !important;
}
.searchIP {
  padding-bottom: 10px;
}
.textLable >>> .el-button + .el-button {
  margin-left: 0px !important;
}
.IpButton {
  width: 100%;
  font-size: 14px;
}
.textLable .IpButton.selected {
  color: rgb(255, 255, 255);
  background: rgb(64, 158, 255);
}

.All {
  height: 100%;
}
.spanInfo {
  height: 100%;
}
.TableInfo {
  height: calc(100% - 20%);
}
.container {
  height: 100%;
}
.TableInfo .netload {
  height: calc(100% - 10px);
}
.textLable {
    max-height: calc(80vh /var(--zoom));
    overflow-y:scroll;
}
.textLable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.textLable::-webkit-scrollbar-thumb {
  background-color: rgba(4, 44, 119, 0.7);
  border-radius: 3px;
}
footer {
  /* position: fixed;
  bottom: 0px;
  width: 100%; */
}
</style>